<route lang="json5" type="page">
  {
    "name": "qrCode",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": true,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "二维码",
    }
  }
</route>

<script setup>
import {
  InputType,
  clearInput,
  generateQrCode,
  inputPlaceholder,
  inputType,
  inputValue,
  isGenerating,
  isValidInput,
  presetContents,
  qrCodeUrl,
  saveQrCode,
  switchInputType,
  usePresetContent,
} from './index'
</script>

<template>
  <view class="main-page">
    <!-- 二维码展示 -->
    <view class="qr-code-image pb-10">
      <image
        :src="qrCodeUrl"
        mode="aspectFit"
        class="h-400rpx w-400rpx"
        @longpress="saveQrCode"
      />
    </view>
    <!-- 输入框 -->
    <view class="input-container pb-10">
      <wd-textarea v-model="inputValue" :placeholder="inputPlaceholder" :focus-when-clear="false" :maxlength="120" clearable show-word-limit custom-class="input-textarea" />
    </view>
    <!-- 生成按钮 -->
    <view class="action-section">
      <wd-button
        type="primary"
        size="large"
        block
        :loading="isGenerating"
        :disabled="!isValidInput"
        @click="generateQrCode"
      >
        {{ isGenerating ? '生成中...' : '生成二维码' }}
      </wd-button>
    </view>
  </view>
</template>

<style scoped lang='scss'>
@import url("./index.scss");
</style>
